<template>
  <section class="payRule">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="newRule">新增</el-button>
    </el-row>
    <!--列表-->
		<el-table :data="integralRuleList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="name" label="规则名称" width="120"/>
			<el-table-column prop="num" label="最高积分次数" width="150"/>
			<!-- <el-table-column prop="age" label="每年最高积分次数" width="200"/> -->
      <el-table-column prop="type_name" label="积分类型" width="200"/>
			<el-table-column prop="total_fraction" label="满分" width="120"/>
      <el-table-column prop="remark" label="备注" width="120"/>
			<el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click="editorIntegralRule(scope.row.id)">编辑</el-button>
          <el-button type="primary" size="mini" @click="toRuleDetail(scope.row.id,scope.row.type)">设置单项分</el-button>
          <el-button type="danger" size="mini"  @click="delIntegralRule(scope.row.id)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
          >
				</el-pagination>
      </div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      :title="dialogTit"
      class="editor-dialog"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="150px"  >
        <el-form-item label="规则名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="最高积分次数" >
          <el-input v-model="addForm.times" type="number"></el-input>
        </el-form-item>
        <!-- <el-form-item label="每年最高积分次数" >
          <el-input v-model="addForm.mostTimes" type="number"></el-input>
        </el-form-item> -->
        <el-form-item label="积分类型" >
          <el-select v-model="addForm.type_name" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
				</el-form-item>
        <el-form-item label="满分">
          <el-input v-model="addForm.fullScore" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="dialogVisible = false">取消</el-button> -->
        <el-button type="primary" @click="setIntegralRule">提交</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			integralRuleList:[],
      dialogTit:'',
      dialogVisible:false,//编辑状态的弹窗
      addForm:{//弹窗的信息
       name:'',//规则名称
       times:'',//最高积分次数
      //  mostTimes:'',//每年最高积分次数
       type_name: '', //积分类型
       fullScore:'',//满分
       remark:''
      },
      id:'',
      page:1,
      totalPage:0,
      options: [{
        value: 'activity',
        label: '活动'
      }, {
        value: 'donate',
        label: '捐赠'
      }, {
        value: 'add_vip',
        label: '发展会员'
      }, {
        value: 'daka',
        label: '打卡'
      },
       {
        value: 'other',
        label: '其他'
      }],
		}
  },
  methods: {
    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
     newRule(){
      //新增
      this.dialogTit='新增';
      this.dialogVisible = true;
    },
    editorIntegralRule(id){
      this.dialogTit='编辑';
      this.id=id
      this.dialogVisible = true;
      this.getIntegralRuleDetail()
    },
    async setIntegralRule(){
      //设置积分规则
      const res=await this.$api.setIntegralRule({
        name:this.addForm.name,
        type:this.addForm.type_name,
        num:this.addForm.times,
        total_fraction:this.addForm.fullScore,
        remark:this.addForm.remark,
        id:this.id
      })
      if(res.data.level=='success'){
        this.$message({
          type:'success',
          message:res.data.message
        })
        this.dialogVisible=false;
        this.getIntegralRuleList();
      }else{
        this.$message({
          type:'error',
          message:res.data.message
        })
      }
    },
    toRuleDetail(id,type){
      this.$router.push({name:'IntegralRuleDetail',query:{'id':id,type:type}})
    },
    delIntegralRule(id){
			//删除积分规则
			const judge= this.$confirm('删除该积分规则?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.delIntegralRule({id});
					if(res.data.level=='success'){
						this.getIntegralRuleList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    async getIntegralRuleDetail(id){
      //获取积分详情
      const res=await this.$api.getIntegralRuleDetail({
        id:this.id
      })
      if(res.data.level=='success'){
        const data=res.data.data
        this.addForm.name=data.name;
        this.addForm.type_name=data.type;
        this.addForm.times=data.num;
        this.addForm.fullScore=data.total_fraction;
        this.addForm.remark=data.remark
      }
    },
    async getIntegralRuleList(){
      //获取积分规则列表
      const res=await this.$api.getIntegralRuleList({
        page:this.page,
        pagesize:16,
      })
      if(res.data.level=='success'){
        this.integralRuleList=res.data.data
        this.totalPage=res.data.page_info.total
			}
    },
    pageChange(e){
      //翻页
      this.page=e
      this.getIntegralRuleList()
    },
    initData(){
      this.id=''
      this.addForm={//弹窗的信息
       type:'',//积分类型
       times:'',//最高积分次数
       mostTimes:'',//每年最高积分次数
       type_name:'',//积分年限
       fullScore:'',//满分
       remark:''
      }
    }
  },
  mounted() {
		this.getIntegralRuleList()
    },
}
</script>
<style lang='scss' scoped>
  .payRule{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .payRule .el-dialog__body{overflow: auto;}
</style>
